<!DOCTYPE html>
<html class="mb-landing no-touch clip-path" data-server="CN" lang="zh-Hans-CN">

<head>
    <meta charset="utf-8">
    <!-- <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> -->
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>首页</title>
    <link href="../images/favicon.ico" rel="icon">
    <link href="../images/favicon.png" rel="apple-touch-icon">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <!-- <link rel="stylesheet" href="../layui/css/layui.css" media="all"> -->
    <link rel="stylesheet" href="../css/index.css" media="screen">
    <link rel="stylesheet" href="../css/index2.css" media="screen">
</head>

<body class="mb-homepage-new" data-locale="zh-CN">
    <nav class="mb-nav-org" id="nav" style="box-shadow: rgba(34, 45, 57, 0.15) 0px 0px 1px 1px;">
        <div class="features-dropdown">
            <ul class="content">
                <li class="library whole">
                    <a href="https://       #####free.modao.cc/features#sec2-library">
                        <img src="../images/library.svg">
                        <h3 class="dropdown-title">素材库</h3>
                        <ul class="dropdown-desc">
                            <li>内置丰富的组件和模板</li>
                            <li>可自定义个人素材库</li>
                            <li>还可共享团队组件库</li>
                        </ul>
                    </a>
                </li>
                <li class="design whole">
                    <a href="https://       #####free.modao.cc/features#sec2-desgin">
                        <img src="../images/design.svg">
                        <h3 class="dropdown-title">设计</h3>
                        <ul class="dropdown-desc">
                            <li>一拖一拽轻松搭建界面</li>
                            <li>多种手势和转场效果</li>
                            <li>无需代码也能做出酷炫动效</li>
                        </ul>
                    </a>
                </li>
                <li class="efficient whole">
                    <a href="https://       #####free.modao.cc/features#sec2-efficient">
                        <img src="../images/efficient.svg">
                        <h3 class="dropdown-title">高效演示及评审</h3>
                        <ul class="dropdown-desc">
                            <li>真实设备边框、全屏演示</li>
                            <li>一键分享</li>
                            <li>在线获取评论</li>
                        </ul>
                    </a>
                </li>
                <li class="label whole">
                    <a href="https://       #####free.modao.cc/features#sec2-sketchLabel">
                        <img src="../images/label.svg">
                        <h3 class="dropdown-title">Sketch插件&amp;标注</h3>
                        <ul class="dropdown-desc">
                            <li>导入Sketch稿</li>
                            <li>自动标注&amp;切图</li>
                            <li>获取全平台代码</li>
                        </ul>
                    </a>
                </li>
                <li class="editing whole">
                    <a href="https://       #####free.modao.cc/features#sec2-cloud">
                        <img src="../images/cloud.svg">
                        <h3 class="dropdown-title">云端编辑</h3>
                        <ul class="dropdown-desc">
                            <li>浏览器直接登录</li>
                            <li>随时随地办公</li>
                            <li>异地团队协作</li>
                        </ul>
                    </a>
                </li>
                <li class="collaboration whole">
                    <a href="https://       #####free.modao.cc/features#sec2-collaboration">
                        <img src="../images/collaboration.svg">
                        <h3 class="dropdown-title">多人协作</h3>
                        <ul class="dropdown-desc">
                            <li>协同编辑、查看、审阅</li>
                            <li>项目同步、沟通透明</li>
                            <li>项目&amp;成员便捷管理</li>
                        </ul>
                    </a>
                </li>
            </ul>
        </div>
        <div class="nav-header">
            <div class="header-left" id="header-left">
                <h1 class="nav-logo">
                    <a href="https://       #####free.modao.cc/">
                        <img alt="墨刀 logo" class="logo core" src="../images/login_logo.png">
                        <img alt="墨刀 logo" class="logo core-phone" src="../images/favicon.png">
                    </a>
                </h1>
                <div class="switch-lang">
                    <a class="active cn" href="#">中文</a>
                    <div class="dropdown">
                        <a class="en dropdown-content" href="#">English</a>
                    </div>
                </div>
                <div class="switch-lang phone">
                    <a class="active cn" href="https://free.modao.cc/cn">中文</a>
                    <span class="splice">/</span>
                    <a class="dropdown-content en" href="https://free.modao.cc/en">En</a>
                </div>
            </div>
            <div class="menu-center" id="menu-center">
                <ul class="menu-content">
                    <li class="features" data-track-id="features">
                        <a href="https://       #####free.modao.cc/features">功能概览</a>
                    </li>
                    <li class="company" data-track-id="enterprise" id="has-dropdown">
                        <a class="title" href="https://free.modao.cc/enterprise">企业版</a>
                        <div class="dropdown">
                            <a class="dropdown-content" data-track-id="enterprise"
                                href="https://free.modao.cc/enterprise">
                                <span>企业版介绍</span>
                            </a>
                            <a class="dropdown-content" data-track-id="enterprise_solution"
                                href="https://free.modao.cc/enterprise_solution">
                                <span>解决方案</span>
                            </a>
                            <a class="dropdown-content" data-track-id="enterprise_case"
                                href="https://free.modao.cc/enterprise_case">
                                <span>企业案例</span>
                            </a>
                        </div>
                    </li>
                    <li class="square" data-track-id="square">
                        <a href="https://       #####free.modao.cc/square">
                            <b>素材广场</b>
                        </a>
                        <img class="square-after-new" src="../images/header_hot_square.svg">
                    </li>
                    <li data-track-id="downloads">
                        <a href="https://       #####free.modao.cc/downloads">下载</a>
                    </li>
                    <li data-track-id="pricing">
                        <a href="https://       #####free.modao.cc/pricing">价格</a>
                    </li>
                    <li class="helper" data-track-id="hc" id="has-dropdown">
                        <a class="title" href="https://free.modao.cc/help-center" id="hc" target="_blank">帮助中心</a>
                        <div class="dropdown">
                            <a class="dropdown-content" href="https://free.modao.cc/forum">讨论区</a>
                        </div>
                    </li>
                    <li data-track-id="payConsulation">
                        <a href="https://       #####free.modao.cc/pay_consultation">付费资讯</a>
                    </li>
                    <li data-track-id="pmcaff">
                        <a href="https://       #####www.pmcaff.com/feed/?utm_source=modaotopnavi"
                            target="_blank">产品问答</a>
                    </li>
                </ul>
            </div>
            <div class="menu-right" id="menu-right">
                <ul id="login-menu">
                    <li class="login-status">
                        <a href="https://       #####free.modao.cc/signout">退出登录</a>
                    </li>
                    <li data-track-id="workspace">
                        <a class="primary workspace" href="project.html">进入工作区</a>
                    </li>
                </ul>
            </div>
            <!-- / 适配移动端 -->
            <div class="menu">
                <div id="menu-center">
                    <ul class="menu-content">
                        <li class="features" data-track-id="features">
                            <a href="https://       #####free.modao.cc/features">功能概览</a>
                        </li>
                        <li class="company" data-track-id="enterprise" id="has-dropdown">
                            <div class="dropdown-title">
                                <a href="https://       #####free.modao.cc/enterprise">企业版</a>
                                <div class="arrow-bottom"></div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-content" data-track-id="enterprise"
                                    href="https://free.modao.cc/enterprise">
                                    <span>企业版介绍</span>
                                </a>
                                <a class="dropdown-content" data-track-id="enterprise_solution"
                                    href="https://free.modao.cc/enterprise_solution">
                                    <span>解决方案</span>
                                </a>
                                <a class="dropdown-content" data-track-id="enterprise_case"
                                    href="https://free.modao.cc/enterprise_case">
                                    <span>企业案例</span>
                                </a>
                            </div>
                        </li>
                        <li data-track-id="downloads">
                            <a href="https://       #####free.modao.cc/downloads">下载</a>
                        </li>
                        <li data-track-id="pricing">
                            <a href="https://       #####free.modao.cc/pricing">价格</a>
                        </li>
                        <li class="helper" data-track-id="hc" id="has-dropdown">
                            <div class="dropdown-title">
                                <a href="https://       #####free.modao.cc/help-center" id="hc" target="_blank">帮助中心</a>
                                <div class="arrow-bottom"></div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-content" href="https://free.modao.cc/forum">讨论区</a>
                            </div>
                        </li>
                        <li data-track-id="payConsulation">
                            <a href="https://       #####free.modao.cc/pay_consultation">付费资讯</a>
                        </li>
                        <li data-track-id="pmcaff">
                            <a href="https://       #####www.pmcaff.com/feed/?utm_source=modaotopnavi"
                                target="_blank">产品问答</a>
                        </li>
                    </ul>
                </div>
                <div id="menu-right">
                    <ul id="login-menu">
                        <li class="login-status">
                            <a href="https://       #####free.modao.cc/signout">退出登录</a>
                        </li>
                        <li data-track-id="workspace">
                            <a class="primary workspace" href="https://free.modao.cc/dashboard">进入工作区</a>
                        </li>
                    </ul>
                </div>
            </div>
            <button hidden="" id="nav-menu-toggle">
                <img class="icon" src="../images/nav.png" alt="">
            </button>
            <div class="deco"></div>
        </div>
    </nav>

    <div id="content">
        <div id="content_1">
            <section id="sec1">
                <div id="sec1_bg"></div>
                <div class="content">
                    <h2 class="md_title">产品设计，不止于快</h2>
                    <h2>远程办公好帮手 在线产品原型设计与协作平台</h2>
                    <a class="to-workspace" data-track-id="try_top" href="https://free.modao.cc/dashboard">进入工作区</a>
                </div>
                <div class="video-cover" data-video-id="mockingbot-video">

                    <picture class="screenshot">
                        <img alt="Preview of MockingBot’s new workspace" src="../images/workspace@phone.png">
                    </picture>
                </div>
            </section>
            <div class="modal-mask video is-close" id="mockingbot-video">
                <div class="modal">
                    <button class="close-btn">
                        <svg class="icon">
                            <!-- <use xlink:href="/icons/sprite.svg#times"></use> -->
                        </svg>
                    </button>
                    <div class="video-container" id="mockingbot-video-container"></div>
                </div>
            </div>
            <section id="sec2">
                <h2>快速完成你的产品设计<br hidden="" class="phone-should-show"><span
                        class="phone-shouldnt-show">，</span>把更多的时间留给思考</h2>
                <div id="usesystem">
                    <a class="system" href="https://free.modao.cc/downloads">
                        <picture>
                            <img alt="简单易用的设计原型工具" src="../images/apple.svg">
                        </picture>
                        <span class="apple_text">MacOS</span>
                    </a>
                    <a class="system" href="https://free.modao.cc/downloads">
                        <picture>
                            <img alt="简单易用的设计原型工具" src="../images/windows.svg">
                        </picture>
                        <span class="windows_text">Windows</span>
                    </a>
                </div>
                <div class="sec2_content">
                    <ul>
                        <li class="desgin">
                            <h3 class="title">设计</h3>
                            <p class="desc">轻松上手，创作自如</p>
                        </li>
                        <li class="interact">
                            <h3 class="title">交互&amp;演示</h3>
                            <p class="desc">逻辑可见，只需一步</p>
                        </li>
                        <li class="label">
                            <h3 class="title">标注&amp;讨论</h3>
                            <p class="desc">对接开发，沟通顺畅</p>
                        </li>
                        <li class="material">
                            <h3 class="title">海量素材</h3>
                            <p class="desc">随时复用，效率翻倍</p>
                        </li>
                        <li class="cloudCooperation">
                            <h3 class="title">云端编辑</h3>
                            <p class="desc">随时随地，开启创作</p>
                        </li>
                        <li class="future">
                            <h3 class="title">企业版</h3>
                            <p class="desc">步调一致，井井有条</p>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
        <div id="content2">
            <section class="quote" id="sec3">
                <div class="content">
                    <span class="sec_tips">轻松上手，创作自如</span>
                    <h3 class="sec_title">设计</h3>
                    <p class="sec_desc">内置丰富的组件库和图标库，小白也能轻松掌握，简单拖拽、排列组合，顷刻间完成精美界面设计</p>
                    <ul class="secquote_list">
                        <li>
                            <span>激活组件面板</span>
                        </li>
                        <li>
                            <span>拖拽组件，快速构成界面</span>
                        </li>
                        <li>
                            <span>完成的精美界面</span>
                        </li>
                    </ul>
                </div>
                <img class="screenshot" width="706" height="528" src="../images/design.png" />
                <picture class="screenshotBg">
                    <img alt="简单易用的设计原型工具" src="../images/quoteBg3.png">
                </picture>
            </section>
            <section class="quote" id="sec4">
                <div class="content">
                    <span class="sec_tips">逻辑可见，只需一步</span>
                    <h3 class="sec_title">交互&amp;演示</h3>
                    <p class="sec_desc">拖拽一下，就能实现页面跳转效果，动作+目标+动效，交互逻辑清晰可见</p>
                    <ul class="secquote_list">
                        <li>
                            <span>自由拖拽</span>
                        </li>
                        <li>
                            <span>更改链接效果</span>
                        </li>
                        <li>
                            <span>一键预览页面和交互效果</span>
                        </li>
                    </ul>
                </div>
                <img class="screenshot" height="528" src="../images/interact-en.png" width="706" />
                <picture class="screenshotBg">
                    <img alt="简单易用的设计原型工具" src="../images/quoteBg4.png">
                </picture>
            </section>
            <section class="quote" id="sec5">
                <div class="content">
                    <span class="sec_tips">对接开发，沟通顺畅</span>
                    <h3 class="sec_title">标注&amp;讨论</h3>
                    <p class="sec_desc">开发者通过一条分享链接即可自动查看原型标注，准确便捷</p>
                    <p class="sec_desc_nomargin">团队多人可以在原型上打点评论，随时随地沟通想法，高效推进改善方案</p>
                    <ul class="secquote_list">
                        <li>
                            <span>查看标注</span>
                        </li>
                        <li>
                            <span>显示标注参数和代码</span>
                        </li>
                        <li>
                            <span>协作成员对项目打点评论</span>
                        </li>
                    </ul>
                </div>
                <img class="screenshot" width="706" height="528" src="../images/inspect.png" />
                <picture class="screenshotBg">
                    <img alt="简单易用的设计原型工具" src="../images/quoteBg3.png">
                </picture>
            </section>
            <section class="quote" id="sec6">
                <div class="content">
                    <span class="sec_tips">随时复用，效率翻倍</span>
                    <h3 class="sec_title">海量素材</h3>
                    <p class="sec_desc">内置多行业模板和多平台素材，按需灵活取用，搭建你自己或团队的素材库，随时复用，把时间投入到更重要的业务梳理和创新中</p>
                    <ul class="secquote_list">
                        <li>
                            <span>内置丰富的组件库、图标库和模板库</span>
                        </li>
                        <li>
                            <span>双击置入画板</span>
                        </li>
                        <li>
                            <span>支持添加标签，方便快速查找</span>
                        </li>
                    </ul>
                    <a class="sec-link" href="https://free.modao.cc/square">
                        <span class="link-text">前往素材广场</span>
                        <img class="link-icon" src="../images/nav-icon.svg">
                    </a>
                </div>
                <img class="screenshot" width="706" height="528" src="../images/templates.png" />
                <picture class="screenshotBg">
                    <img alt="简单易用的设计原型工具" src="../images/quoteBg4.png">
                </picture>
            </section>
            <section class="quote" id="sec7">
                <div class="content">
                    <span class="sec_tips">随时随地，开启创作</span>
                    <h3 class="sec_title">云端编辑</h3>
                    <p class="sec_desc">无论在公司还是远程，只需打开浏览器，随时可以让工作无缝衔接；无需反复下载和上传文件，即时同步项目信息，交接流程更加高效</p>
                    <ul class="secquote_list">
                        <li>
                            <span>多设备协同工作</span>
                        </li>
                        <li>
                            <span>支持多人同时编辑</span>
                        </li>
                        <li>
                            <span>项目交接流畅</span>
                        </li>
                    </ul>
                </div>
                <picture class="screenshot">
                    <img alt="工具流需求文档生成，关注产品全局" src="../images/sec5_v2.png">
                </picture>
                <picture class="screenshotBg">
                    <img alt="简单易用的设计原型工具" src="../images/quoteBg3.png">
                </picture>
            </section>
        </div>
        <section class="sec_other" id="other2">
            <div class="screenshot_content">
                <span class="sec_tips">步调一致，井井有条</span>
                <h3 class="sec_title">企业版</h3>
                <p class="sec_desc">不止是产品经理，任何角色都可以在墨刀企业版找到一席之地</p>
                <p class="sec_desc">企业级项目上下游协作、交接及管理，让团队中每个人都如你一样高效</p>
            </div>
            <picture class="screenshot_other">
                <img alt="工具流需求文档生成，关注产品全局" src="../images/sec6_v2.png">
            </picture>
            <picture class="screenshotBg">
                <img alt="简单易用的设计原型工具" src="../images/sec6Bg.svg">
            </picture>
        </section>
        <div id="content_5">
            <section id="fast-signup">
                <div id="back_img">
                    <img alt="简单易用的设计原型工具" class="back_1" src="../images/back_1.svg">
                    <p class="back_2"></p>
                    <p class="back_3"></p>
                    <p class="back_4"></p>
                    <p class="back_5"></p>
                    <img alt="简单易用的设计原型工具" class="back_6" src="../images/back_2.svg">
                    <p class="back_7"></p>
                </div>
                <h2>现在就使用墨刀，开始无忧创作</h2>
                <a class="submit" href="https://free.modao.cc/dashboard">立即注册</a>
            </section>
        </div>

    </div>

    <footer class="mb-footer-new">
        <div class="list">
            <h2>产品</h2>
            <ul>
                <li class="footer-link">
                    <a href="https://       #####free.modao.cc/features#sec2-library" target="_blank">素材库</a>
                </li>
                <li class="footer-link">
                    <a href="https://       #####free.modao.cc/features#sec2-desgin" target="_blank">设计及演示</a>
                </li>
                <li class="footer-link">
                    <a href="https://       #####free.modao.cc/inspect" target="_blank">Sketch 插件&amp;标注</a>
                </li>
                <li class="footer-link">
                    <a href="https://       #####free.modao.cc/enterprise" target="_blank">企业版</a>
                </li>
                <li class="footer-link">
                    <a href="https://       #####modao.cc/app/changelog" target="_blank">更新日志</a>
                </li>
                <li class="footer-link">
                    <a href="https://       #####free.modao.cc/downloads" target="_blank">产品下载</a>
                </li>
            </ul>
        </div>
        <div class="list">
            <h2>支持</h2>
            <ul>
                <li>
                    <a href="https://       #####free.modao.cc/help-center" id="hc_footer" target="_blank">帮助中心</a>
                </li>
                <li>
                    <a href="http://class.modao.im/" target="_blank">公开课</a>
                </li>
                <li class="footer-link">
                    <a href="https://       #####free.modao.cc/forum" target="_blank">讨论区</a>
                </li>
                <li>
                    <a href="https://       #####jinshuju.net/f/EqHIlS" target="_blank">公益/教育优惠</a>
                </li>
                <li>
                    <a href="https://       #####free.modao.cc/bonus" target="_blank">福利中心</a>
                </li>
            </ul>
        </div>
        <div class="list">
            <h2>关于</h2>
            <ul>
                <li>
                    <a href="https://       #####free.modao.cc/about" target="_blank">关于我们</a>
                </li>
                <li>
                    <a href="https://       #####www.lagou.com/gongsi/j121869.html" target="_blank">加入我们</a>
                </li>
                <li>
                    <a href="https://       #####free.modao.cc/tos" target="_blank">使用条款</a>
                </li>
                <li>
                    <a href="https://       #####free.modao.cc/privacy" target="_blank">隐私协议</a>
                </li>
            </ul>
        </div>
        <div class="list">
            <h2>更多</h2>
            <ul>
                <li>
                    <a href="https://       #####cdn.modao.cc/document/landing/modao.pdf" target="_blank">向他人介绍墨刀</a>
                </li>
                <li>
                    <a href="https://       #####modao.cc/posts/9463" target="_blank">「解x」计划</a>
                </li>
                <li>
                    <a href="https://       #####modao.cc/posts/10270" target="_blank">墨刀特约讲师</a>
                </li>
                <li>
                    <a href="https://       #####modao.cc/posts/9090" target="_blank">墨刀原型专家</a>
                </li>
                <li>
                    <a href="https://       #####free.modao.cc/map" target="_blank">网址导航</a>
                </li>
                <li>
                    <a href="https://       #####free.modao.cc/prototyping2020" target="_blank">设计大赛</a>
                </li>
            </ul>
        </div>
        <div class="contact">
            <h2>联系我们</h2>
            <ul class="content">
                <li>
                    <p>如需帮助，请发送邮件至 <a href="mailto:support@mockingbot.com">support@mockingbot.com</a></p>
                </li>
                <li>
                    <p>商务合作：<a href="mailto:bd@mockingbot.com">bd@mockingbot.com</a></p>
                </li>
            </ul>
            <ul class="concat_icon_logo">
                <li>
                    <a href="http://weibo.com/mockingbot" target="_blank">
                        <img class="icon" src="../images/weibo.svg">
                        <img class="icon" id="active" src="../images/weibo-white.svg">
                    </a>
                </li>
                <li>
                    <a class="wechat">
                        <img class="icon" src="../images/wechat.svg">
                        <img class="icon" id="active" src="../images/wechat-white.svg">
                        <img class="qrcode" src="../images/wechat-qrcode.png">
                    </a>
                </li>
            </ul>
        </div>
        <div class="copyright">© 2012-2020 墨刀<span class="em-dash"> - </span>
            <a href="https://       #####modao.cc/">
                强大易用的原型设计与协同工具</a>
            <p class="record">京ICP备14055711号-2</p>
        </div>
    </footer>
    <div id="toTop" style="display: none;">
        <i class="fa fa-chevron-up" aria-hidden="true"></i>
    </div>
    <a class="kefu-link" href="#" style="display: block;">
        <div class="layer-3" id="YSF-BTN-HOLDER">
            <div id="YSF-CUSTOM-ENTRY-3">
                <img class="icon" src="../images/day-work.png">
            </div>
        </div>
    </a>
    <!-- 存储cookie -->
    <script src="../js/cookie.js"></script>
    <!-- 判断 PC mobile -->
    <script src="../js/browser.js"></script>
    <!-- 封装自定义弹层 -->
    <script src="../js/myLayer.js"></script>
    <!-- layui 框架 -->
    <script src="../layui/layui.all.js"></script>
    <!-- 当前页面需求文档 -->
    <script src="../js/document.js"></script>
    <!-- 页面逻辑 -->
    <script src="../js/index.js"></script>
</body>

</html>